<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script><script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script><link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css" /><script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/Mock.js/1.0.0/mock-min.js"></script>
    <script src="https://unpkg.com/xlsx-populate@1.21.0/browser/xlsx-populate.min.js"></script>
    <meta name="author" content="lijinbo" />
    <title>180-Excel和JSON互转</title>
    <script type="module" crossorigin src="../../../../static/js/180-index.html-50c1c3f8.js"></script>
    <link rel="modulepreload" crossorigin href="../../../../static/common/modulepreload-polyfill-3cfb730f.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/page-53f648eb.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/loadScript-03791e28.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/excelExportStyle-79dfab3e.js">
  </head>

  <body>
    <div id="app">
      <el-button @click="dialogVisible = true">导入</el-button>
      <el-button type="success" @click="exportDataExcel" :disabled="!this.tableData.length">导出数据为表格</el-button>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
        <el-form label-width="120px">
          <el-form-item label="操作">
            <el-button @click="addRow">新增行</el-button>
            <el-button @click="addCol">新增列</el-button>
          </el-form-item>
          <el-form-item label="表格文件导入">
            <el-button type="info" @click="importXlsxFile">导入表格文件</el-button>
          </el-form-item>
          <el-form-item label="JSON文件导入">
            <el-button type="primary" @click="importJsonFile">导入JSON文件</el-button>
          </el-form-item>
          <el-form-item label="JSON文本导入">
            <el-input type="textarea" placeholder="请输入json文本内容，点击下方按钮导入" v-model="jsonStr"> </el-input>
            <el-button style="margin-top: 16px" type="primary" :disabled="!jsonStr" @click="importJson">
              json文本导入数据
            </el-button>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <el-table id="tableData" stripe :data="tableData">
        <el-table-column v-for="(item, index) in rowKey" :key="item.key" :prop="item.key" :label="item.name" />
      </el-table>
      <el-backtop></el-backtop>
    </div>

    
  </body>
</html>
